<script setup lang="ts">
const navList = [
  {
    name: '我的一天',
    path: '/today',
    icon: ''
  },
  {
    name: '全部',
    path: '/all',
    icon: ''
  },
  {
    name: '已完成',
    path: '/completed',
    icon: ''
  }
]
</script>

<template>
  <div class="sider">
    <div class="profile">
      <div class="avatar">
        <img alt="头像" />
      </div>
      <div>
        <p>姓名</p>
      </div>
    </div>
    <div class="search">
      <input type="search" name="task" id="task" />
    </div>
    <nav class="nav-list">
      <RouterLink v-for="(r, idx) in navList" :key="idx" :to="r.path"><span class="icon"></span>{{ r.name }}
      </RouterLink>
    </nav>
  </div>
</template>

<style scoped>
.sider {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-secondary-color);
}

.sider>.profile {
  width: 100%;
  height: 40px;
  display: flex;
}

.search {
  width: 100%;
  height: 30px;
  display: flex;
  margin-block: 8px;
}

#task {
  flex: 1;
  margin-inline: 6px;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--background-color);
}

.sider .avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color);
  border-radius: 50%;
}



.nav-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-list a {
  position: relative;
  --text-height: 32px;
  margin-inline: 6px;
  height: var(--text-height);
  line-height: var(--text-height);
  display: flex;
  color: inherit;
  text-decoration: none;
  text-indent: 36px;
  border-radius: var(--border-radius);
  background-color: var(--background-hover-color);
}

.nav-list a::before {
  position: absolute;
  width: 3px;
  height: 50%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
  border-radius: var(--border-radius);
  background-color: var(--primary-color);
}

.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background-color: var(--background-color);
  border-radius: 50%;
}
</style>
